<!--  -->
<template>
  <div class="breadcrumb">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="v in lists" :key="v.path">
        <router-link :to="v.path">{{ v.meta.title }}</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: "Breadcrumb",
  data() {
    return {
      lists: [],
    };
  },
  watch: {
    $route(oldVal) {
      //   this.lists = oldVal.matched;
      this.getBreadcrumb(oldVal.matched);
    },
  },
  mounted() {
    this.getBreadcrumb(this.$route.matched);
  },
  methods: {
    getBreadcrumb(matched) {
      if (matched.length && matched[1].name == "index") {
        matched = [{ path: "/home", name: "home", meta: { title: "首页" } }];
      }
      this.lists = matched
    },
  },
};
</script>

<style scoped>

.el-breadcrumb{
    height: 60px;
    font-size: 15px;
    line-height: 60px;
}
</style>